<template>
	<view>
		<view class="inputs flex">
			<image src="/static/search_b.png" mode=""></image>
			<input
				v-model="data.queryParams.city"
				placeholder-class="input_class"
				auto-focus="true"
				type="text"
				placeholder="输入城市名称搜索"
				confirm-type="search"
				@confirm="handleSearch"
			/>
			<view v-if="data.queryParams.city" class="flex_jc_cent" style="width: 50rpx;" @click="clearInput">
				<uni-icons type="close" size="22" ></uni-icons>
			</view>
		</view>
		<view class="list" v-if="data.list.length != 0">
			<view class="item" v-for="(item, index) in data.list" :key="index" @click="$pageGo(`/pages/index/citycommunity?city=${item.name}`)">
				<view class="imgflex flex_jc_cent">
					<image src="/static/lf.png" mode=""></image>
					<text>{{ item.name }}</text>
					<image src="/static/rf.png" mode=""></image>
				</view>
				<view class="hq flex_jc_cent">
					<image src="/static/q.png" mode="aspectFill"></image>
					历史线下活动-{{ item.count }}场
				</view>
				<view class="imgs">
					<image :src="item.img" mode=""></image>
				</view>
			</view>
		</view>
		<view class="kong" v-if="data.queryParams.city && data.list.length == 0 && data.isshow">
			<image src="/static/k.png" mode=""></image>
			<view class="text">
				没有找到你搜索的内容
				<view class="">换个关键词试试~</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getHistoryList } from '@/api/index.js';
const data = reactive({
	isshow:false,
	list: [],
	queryParams: {
		city:'',
		url: '/mini/page/home/history/line/down/list',
		pageNum: 1,
		pageSize: 10
	}
});
const getList = () => {
	getHistoryList(data.queryParams).then((res) => {
		if(res.code == 200){
			data.list= res.data
			data.isshow = true
		}
	});
};
const handleSearch = (e) => {
	if (data.queryParams.city == '') {
		uni.showToast({ title: '请输入搜索内容', icon: 'none' });
		return;
	}
	data.list = []
	// 每次搜索重置为第一页
	data.queryParams.pageNum = 1;
	getList();
};
// 清空输入框的方法
const clearInput = () => {
	data.queryParams.city = '';
	data.list = [];
	data.isshow = false;
};
</script>

<style lang="scss">
page {
	background: #f7f8f6;
}
.kong {
	width: 360rpx;
	margin: 260rpx auto;
	image {
		width: 360rpx;
		height: 236rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
		margin-top: 50rpx;
		text-align: center;
	}
}
.input_class {
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #cacaca;
}
.inputs {
	width: 710rpx;
	height: 80rpx;
	background: #ffffff;
	border-radius: 40rpx;
	margin: 20rpx auto;
	padding: 24rpx 32rpx;
	box-sizing: border-box;
	image {
		width: 32rpx;
		height: 32rpx;
	}
	input {
		flex: 1;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000;
		padding-left: 15rpx;
	}
}

.list2 {
	width: 710rpx;
	margin: 20rpx auto;
	border-radius: 20rpx;
	background: #fff;
	padding: 20rpx;
	box-sizing: border-box;
	.item2 {
		margin: 20rpx auto;
	}
	.title {
		font-family: 'DIN-BOLD';
		font-weight: bold;
		font-size: 40rpx;
		color: #75613e;
	}
	.times {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #75613e;
		text {
			font-family: 'DIN-BOLD';
			font-weight: 500;
			font-size: 32rpx;
			color: #75613e;
		}
	}
	.ttt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #535251;
		margin: 20rpx auto;
		text {
			font-family: 'DIN-BOLD';
			font-weight: 500;
			font-size: 24rpx;
			color: #535251;
		}
	}
}
.list {
	.item {
		margin: 30rpx auto;
	}
	.imgflex {
		image {
			width: 60rpx;
			height: 60rpx;
		}
		text {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #75613e;
			margin: 0 30rpx;
		}
	}
	.hq {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		width: 440rpx;
		height: 48rpx;
		background: #d8c6a7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 24rpx auto;
		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
	.imgs {
		width: 710rpx;
		height: 380rpx;
		border-radius: 20rpx;
		margin: 0rpx auto;
		image {
			width: 710rpx;
			height: 380rpx;
			border-radius: 20rpx;
		}
	}
}
</style>
